<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>v-model</title>
</head>
<body>
<div id="app"></div>

<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
  /**
   * 数据中'哈哈哈'为input元素value属性的原始值，通过button的click事件将新值赋给了myValue
   *
   * vue察觉到页面的中使用的变量修改了，所以重新渲染了页面
   * */
  new Vue({
    el: '#app',
    template: `
          <div>
            <input type="text" v-model="myValue" />

            当用户输入xxx的时候，显示下面的button
            </br>
            <button v-show=" myValue== 'xxx' ">用户输入的是xxx</button>

          </div>
      `,
    data: function () {
      return {
        myValue: '哈哈哈'

      }
    }
  });

</script>
</body>
</html>
